import { useRef, useState } from 'react'
import { Button, Drawer, Popover, Space, Tooltip } from 'antd'
import Icon, { CopyOutlined, LeftOutlined, LinkOutlined, RightOutlined, SendOutlined } from '@ant-design/icons'

import { useAntdPopupAnimation } from '@/services/popupSlot'
import { handleCopy } from '@/utils/utils'
import { IListItem } from '../interface'
import { Address } from './Address'
import { Amazon } from './Amazon'
import { BaseInfo } from './BaseInfo'
import { RouteLine } from './RouteLine'
import { TransferOrderNumRoute } from './TransferOrderNumRoute'
import CustomerServiceIcon from '@/assets/icons/customerService.svg?react'
import styles from '../styles.module.less'

type TItem = Omit<IListItem, '$NotFound'>
interface IDetailsDrawerProps {
  list: TItem[]
  item: TItem
  destroy: () => void
}

export const DetailsDrawer = ({ list, item, destroy }: IDetailsDrawerProps) => {
  const { open, onHide, afterOpenChange } = useAntdPopupAnimation(destroy)
  list = useRef(list).current

  const [curItem, setCurItem] = useState(item)

  const curIndex = list.findIndex(v => v.$key === curItem.$key)
  const prevItem = (curIndex > -1 ? (list[curIndex - 1] ?? null) : null) as TItem | null
  const nextItem = (curIndex > -1 ? (list[curIndex + 1] ?? null) : null) as TItem | null

  return (
    <Drawer
      styles={{ header: { backgroundColor: 'var(--fba-bg)' }, body: { padding: 0, backgroundColor: 'var(--fba-bg)' } }}
      title={
        <Space style={{ width: '100%', justifyContent: 'space-between' }}>
          Details
          {list.length > 1 && (
            <Space size={12}>
              <Button type="link" disabled={!prevItem} onClick={() => prevItem && setCurItem(prevItem)}>
                <LeftOutlined />
                Previous item
              </Button>
              <Button type="link" disabled={!nextItem} onClick={() => nextItem && setCurItem(nextItem)}>
                Next item
                <RightOutlined />
              </Button>
            </Space>
          )}
        </Space>
      }
      width={1200}
      maskClosable
      keyboard
      open={open}
      onClose={onHide}
      afterOpenChange={afterOpenChange}
    >
      <Main waybillNo={curItem.waybillNo} fbaId={curItem.fbaId} />
    </Drawer>
  )
}

function Main({ waybillNo, fbaId }: { waybillNo: string; fbaId: string | null }) {
  return (
    <div style={{ padding: 20, height: '100%', overflow: 'auto' }} className={styles.contentMinWidth}>
      <BaseInfo waybillNo={waybillNo} fbaId={fbaId} />
      <div style={{ display: 'flex', gap: 20, margin: '20px 0' }}>
        <div style={{ flex: '1.5 1.5', overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ flex: '0 0 auto' }}>
            <RouteLine waybillNo={waybillNo} />
          </div>
          <div style={{ flex: '0 0 auto' }}>
            <TransferOrderNumRoute waybillNo={waybillNo} />
          </div>
        </div>
        <div style={{ flex: '1 1', overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ flex: '0 0 auto' }}>
            <Address waybillNo={waybillNo} />
          </div>
          <Amazon waybillNo={waybillNo} style={{ flex: '0 0 auto' }} />
          <Space style={{ flex: '0 0 auto', gap: 8 }} styles={{ item: { flex: '1 1' } }}>
            <Button
              style={{ width: '100%' }}
              size="large"
              type="primary"
              ghost
              icon={<LinkOutlined />}
              onClick={() => handleCopy(location.href, { isEn: true })}
            >
              Copy Link
            </Button>
            <Popover
              content={
                <Space size={12}>
                  <span>support@fbabee.com</span>
                  <div>
                    <Button
                      type="text"
                      icon={<CopyOutlined />}
                      onClick={() => handleCopy('support@fbabee.com', { isEn: true })}
                    />
                    <Tooltip title="Send">
                      <Button type="text" icon={<SendOutlined />} onClick={() => open(`mailto:support@fbabee.com`)} />
                    </Tooltip>
                  </div>
                </Space>
              }
            >
              <Button
                style={{ width: '100%' }}
                size="large"
                type="primary"
                ghost
                icon={<Icon component={CustomerServiceIcon} />}
              >
                Contact Us
              </Button>
            </Popover>
          </Space>
        </div>
      </div>
    </div>
  )
}
